<template>
	<view>
		<up-loading-page :loading="true" loadingText="loading..." v-if="showLoading"></up-loading-page>
	</view>
		<view class="layout" v-show="!showLoading">
			<cu-custom :isBack="true" background="rgba(255, 255, 255, 1.0)">
				<block slot="content">我的订单</block>
			</cu-custom>
			<view class="tabstop" style="background: #ffffff; padding-left: 15rpx;">
				<up-tabs :list="list1" @click="click"  :activeStyle="{color: '#17288f',transform: 'scale(1.05)'}"
				:inactiveStyle="{color: '#606266',transform: 'scale(1)'}"></up-tabs>
			</view>

			<view class="group1" v-for="(order, index) in selectGoodsOrder" :key="order.index" @click="goPage(order)">
				<view class="parse1">
					<view class="text1">订单号：{{ order.order_sn }}</view>
					<view class="text2">{{ order.status }}</view>
				</view>
				<view class="parse2">
					<view class="tw">
						<image class="img" src="../../static/pr1.png"></image>
						<view class="danjia">
							<view class="text3">{{ order.name }}</view>
							<view class="money">
								<view class="text4"> {{ order.total_integral / order.sale}}积分</view>
								<view class="text5">*{{ order.sale }}</view>
							</view>
						</view>
					</view>
				</view>
				<image class="fenge" src="../../static/横线.png"></image>
				<view class="parse3">
					<view class="pay">
						<view class="text6">共{{ order.sale }}件商品</view>
						<view class="text7">应付：{{ order.total_integral }}积分</view>
					</view>
				</view>
				<view class="parse4" v-if="order.status === '待兑换'">
					<view class="btn">
						<view @click="goPage(order)" class="b1">取消订单</view>
						<view @click="goPage(order)" class="b2">兑换</view>
					</view>
				</view>
				<!-- 待发货时 -->
				<view class="btn-box" v-if="order.status === '待发货'">
					<view class="first-btn">
						<view @click="goPage(order)" class="btn-cancel">取消订单</view>
					</view>
				</view>
				<view class="btn-box" v-if="order.status === '待收货'">
					<view class="first-btn">
						<view @click="goPage(order)" class="btn-look">查看物流</view>
						<view @click="goPage(order)" class="btn-sure">确认收货</view>
					</view>
				</view>
				<!-- 待核销 -->
				<view class="btn-box" v-if="order.status === '待核销'">
					<view class="first-btn">
						<view @click="goPage(order)" class="btn-look">取消订单</view>
						<view @click="goPage(order)" class="btn-sure">核销码</view>
					</view>
				</view>
				<!-- 已取消 -->
				<view class="btn-box" v-if="order.status === '已完成'">
					<view class="first-btn">
						<view @click="goPage(order)" class="btn-cancel">删除订单</view>
					</view>
				</view>
			</view>
		</view>
</template>
<script setup>
	import {
		onMounted,
		reactive,
		ref,
		computed
	} from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import request from '@/common/request.js';
	import api from '../../common/apiService';
	import {
		loadingType
	} from '@/utils/type';
	const showLoading = ref(true)

	const {
		getOrderList
	} = api;
// 跳转
const goPage = (order) =>{
		uni.navigateTo({
			url:'/pages/order-detail/order-detail?data='+ JSON.stringify({
				status: order.status,
				order_id: order.order_sn,
				order_name: order.name,
				order_price: order.price,
				order_sale: order.sale
			})
		})
	}

	// 上下联动

	onMounted(() => {
		showLoading.value = false;
		const uid = uni.getStorageSync('uid');
		getOrderList({
			uid: 1
		}).then(data => {
			console.log(data);
			if (data && data.list) {
				const list = data.list;
       orderList.value = list.map(item => {
					return {
						...item,
						status: item.order_status_desc,
						name: item.order_goods[0].goods_name,
						sale: item.goods_count,
					}
			 })	
			}
		})

	});
	// 创建响应式数据  
	const list1 = reactive([{
			name: '全部',
			id: 1
		},
		{
			name: '待兑换',
			id: 2
		},
		{
			name: '待发货',
			id: 3
		},
		{
			name: '待收货',
			id: 4
		},
		{
			name: '待核销',
			id: 5
		},
		{
			name: '已完成',
			id: 6
		}
	]);

	// 建立全部的ref列表
	const orderList = ref([{
		cancel_btn: 0,
		comment_btn: 1,
		create_time: "2024-07-12 01:16:37",
		del_btn: 0,
		delivery_btn: 1,
		delivery_type: 1,
		goods_count: 1,
		id: 5,
		order_amount: "10.01",
		order_cancel_time: "",
	}]);
	
	// 及数据
	
	
	// 当前选中的状态
	const currentStatus = ref('全部'); // 默认状态为“全部”
	// 定义方法  
	function click(index) {
		console.log('index', index); // 输出索引值
		currentStatus.value = index.name
		console.log("选择的状态", currentStatus.value)
	}


	// 开始计算
	const selectGoodsOrder = computed(() => {
		if (currentStatus.value === '全部') {
			return orderList.value.flat();
		}
		return orderList.value.flat().filter(order => order.status === currentStatus.value)
	})
	// 判断按钮的显隐
	

// mine页面跳转
onLoad((e)=>{
	console.log("得到",e)
	currentStatus.value = e.status
})
</script>

<style lang="scss" scoped>

.layout {
	background: #f7f7f7;
	.group1 {
		width: 710rpx;
		height: 453rpx;
		background: #ffffff;
		border-radius: 10rpx;
		margin-left: 20rpx;
		margin-top: 23rpx;
		// border: 1px solid red;

		.parse1 {
			display: flex;

			.text1 {
				width: 400rpx;
				height: 23rpx;
				line-height: 23rpx;
				font-size: 24rpx;
				padding-left: 28rpx;
				padding-top: 32rpx;
			}

			.text2 {
				width: 100rpx;
				height: 22rpx;
				line-height: 22rpx;
				font-size: 28rpx;
				color: #ff8400;
				margin: 32rpx 0 0 130rpx;
			}
		}

		.parse2 {
			.tw {
				display: flex;

				.img {
					width: 160rpx;
					height: 160rpx;
					border-radius: 10rpx;
					padding-left: 31rpx;
					padding-top: 37rpx;
				}

				.danjia {
					.text3 {
						font-size: 28rpx;
						padding-left: 30rpx;
						padding-top: 38rpx;
						padding-right: 26rpx;
						width: 465rpx;
					}

					.money {
						display: flex;

						.text4 {
							font-size: 30rpx;
							padding-left: 25rpx;
							padding-top: 30rpx;
							color: #ff8400;
						}

						.text5 {
							font-size: 24rpx;
							color: #cccccc;
							padding-left: 340rpx;
							padding-top: 50rpx;
						}
					}
				}

			}

		}

		.fenge {
			width: 680rpx;
			height: 10rpx;
			color: #f8f8f8;
			padding-left: 24rpx;
		}

		.parse3 {
			.pay {
				display: flex;

				.text6 {
					font-size: 20rpx;
					color: #cccccc;
					padding-left: 350rpx;
					padding-top: 24rpx;
				}

				.text7 {
					font-size: 28rpx;
					margin-left: 16rpx;
					padding-top: 18rpx;
				}
			}
		}

		.parse4 {
			width: 710rpx;
			height: 90rpx;
			// border: 1px solid red;
			.btn {
				width: 300rpx;
				height: 50rpx;
				// border: 1px solid red;
				margin: 20rpx 0 0 400rpx;
				display: flex;

				.b1 {
					width: 156rpx;
					height: 50rpx;
					font-size: 24rpx;
					border: 1px solid #c7c7c7;
					border-radius: 20rpx;
					padding: 7rpx 0 0 31rpx;
					box-sizing: border-box;
					color: #737373;
				}

				.b2 {
					width: 106rpx;
					height: 50rpx;
					font-size: 24rpx;
					color: #293897;
					border: 1rpx solid #293897;
					border-radius: 30rpx;
					box-sizing: border-box;
					padding: 7rpx 0 0 30rpx;
					margin-left: 11rpx;
				}
			}

		}
		
		.btn-box {
			width: 710rpx;
			height: 90rpx;
			
			.first-btn {
				width: 300rpx;
				height: 50rpx;
				// border: 1px solid red;
				margin: 20rpx 0 0 400rpx;
				display: flex;
				
				.btn-cancel {
					width: 156rpx;
					height: 50rpx;
					border: 1px solid #dcdcdc;
					color: #6d6d6d;
					margin: 0 0 0 100rpx;
					border-radius: 30rpx;
					box-sizing: border-box;
					padding: 7rpx 0 0 31rpx;
					font-size: 24rpx;
				}
				
				.btn-look {
					width: 156rpx;
					height: 50rpx;
					font-size: 24rpx;
					border: 1px solid #c7c7c7;
					border-radius: 20rpx;
					padding: 7rpx 0 0 31rpx;
					box-sizing: border-box;
					color: #737373;
				}
				
				.btn-sure {
					width: 156rpx;
					height: 50rpx;
					font-size: 24rpx;
					background: #293897;
					// border: 1rpx solid #293897;
					color: #ffffff;
					border-radius: 30rpx;
					box-sizing: border-box;
					padding: 7rpx 0 0 30rpx;
					margin-left: 11rpx;
				}
			}
		}
	}
	}
</style>